<template>
  <el-row :gutter="10">
    <el-col v-for="(item,index) in headerList" :key="index" :xs="24" :sm="12" :md="8" :lg="6">
      <div class="grid-content">
        <i :class="item.icon" />
        <div class="desic">
          <div class="title">{{ item.title }}</div>
          <div class="num">{{ item.num }}</div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue'
export default defineComponent({
  setup() {
    const headerList = reactive([{
      icon: 'el-icon-user-solid',
      title: '员工数量',
      num: 123
    }, {
      icon: 'el-icon-s-goods',
      title: '办公财务审批',
      num: 123
    }, {
      icon: 'el-icon-s-promotion',
      title: '分享',
      num: 123
    }, {
      icon: 'el-icon-warning',
      title: '异常数',
      num: 123
    }])
    return {
      headerList
    }
  }

})

</script>

<style lang="scss" scoped>
  @import '../../../styles/variables.scss';

  .grid-content {
    background-color: #fff;
    border-radius: 2px;
    overflow: hidden;
    padding: 12px;
    display: flex;
    height: 120px;
    align-items: center;
    margin-bottom: 10px;

    i {
      font-size: 56px;
      color: $color-primary;
      flex: 1;
    }

    .desic {
      flex: none;

      .title {
        font-size: 18px;
        padding-bottom: 12px;
        color: $color-primary;
      }

      .num {
        font-size: 14px;
        color: #666;
      }
    }
  }

</style>
